<template>
    <div class="item">
        <div class="item-header">
            <p>报警用户年龄分布</p>
            <img src="../img/title_bor_tow.png" alt="">
        </div>
        <div class="item-chart" id="AgeDistribution"/>
    </div>
</template>

<script>
    import elementResizeDetectorMaker from 'element-resize-detector';
    var erd = elementResizeDetectorMaker(); //创建实例
    export default {
        data() {
          return{
              chart: null
          }
        },
        mounted() {
            const option = {
                title: {
                   show: false
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    show: false
                },
                grid: {
                    top: '15px',
                    left: '15px',
                    right: '15px',
                    bottom: '15px',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    data: [0, 40, 80, 120, 160],
                    axisLabel: {
                        textStyle: {
                            color: '#fff', //x轴data 的颜色
                            fontSize: 10,
                        }
                    },
                    splitLine:{
                        show:false,
                    },
                },
                yAxis: {
                    type: 'category',
                    data: ['20~29岁', '30~39岁', '40~49岁', '50~59岁', '60~69岁', '70~79岁'],
                    axisLabel: {
                        textStyle: {
                            fontSize: 10,
                            color: '#fff', //x轴data 的颜色
                        }
                    },
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: 13,
                        barMaxWidth: 13,
                        itemStyle: {
                            normal: {
                                color: '#0a6df3',
                                label: {
                                    show: true,
                                    position: 'right',
                                    color: '#fff',
                                    fontSize: 12,
                                    formatter: '{c}'
                                }
                            }
                        },
                        data: [40, 111, 140, 145, 150, 155]
                    },
                ]
            };
            this.chart = this.$echarts.init(document.getElementById('AgeDistribution'));
            this.chart.setOption(option);
            erd.listenTo(this.$el,()=>{
                this.chart.resize();
            });
        }
    }
</script>

<style scoped lang="less">
    @import "index";
</style>
